import { createItem, updateItem } from '@/services/api/dept';
import { CreateItem, DeptResultItem } from '@/services/api/model/deptModel';
import { findParentIds } from '@/utils';
// import { getDeptList } from '@/services/api/users';
import { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProFormCascader,
  ProFormDependency,
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, message } from 'antd';
import React from 'react';
type CreateFormProps = {
  onCancel?: () => void;
  onSubmit?: (values: DeptResultItem) => void;
  itemToken?: string;
  title?: string;
  trigger?: JSX.Element;
  tableData: DeptResultItem[];
  initialValues?: CreateItem &
    DeptResultItem & {
      isPid: boolean;
    };
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { initialValues, tableData } = props;
  const {
    onSubmit,
    title = '添加',
    trigger = (
      <Button type="primary">
        <PlusOutlined />
        {title}
      </Button>
    ),
  } = props;

  return (
    <ModalForm<DeptResultItem>
      title={`${title}部门`}
      modalProps={{
        // 关闭弹框是否销毁 (相当于直接进行了表单重置)
        destroyOnClose: true,
      }}
      trigger={trigger}
      onFinish={async (values) => {
        // 存在id的话 标识是编辑,此处的写法不知道是否符合该组件的写法.
        if (!initialValues?.id) {
          await createItem({
            ...values,
          });
        } else {
          await updateItem({
            ...values,
            id: initialValues.id,
          });
        }
        if (onSubmit) {
          onSubmit(values);
        }
        message.success('提交成功');
        // 返回true 则关闭
        return true;
      }}
      // 此处的默认值会覆盖组件上的initialValue
      initialValues={{
        ...initialValues,
      }}
    >
      <ProFormText
        label="名称"
        name="name"
        rules={[
          {
            required: true,
            message: '请输入名称',
          },
        ]}
        placeholder="请输入名称"
      />
      <ProFormRadio.Group
        label="顶级部门"
        // 添加一个默认值
        initialValue={false}
        name="isPid"
        options={[
          {
            label: '是',
            value: false,
          },
          {
            label: '否',
            value: true,
          },
        ]}
      />
      {/* ProFormDependency该组件用来做数据联动的,可以做一些逻辑处理,或者给某一个组件赋默认值之类的 */}
      <ProFormDependency key="globalUseMode" name={['isPid']} ignoreFormListField>
        {({ isPid }) => {
          // 如果不是顶级部门的话,就选择某一个部门下
          if (isPid) {
            return (
              <ProFormCascader
                // convertValue格式化默认值,有些情况是后台返回的数据格式不是组件想要的,通过此方法格式化
                convertValue={(value) => {
                  if (value) {
                    // 找到当前id的所有父id
                    const ids = findParentIds(tableData, value);
                    // 包含自己的
                    return [...ids, value];
                  } else {
                    return [];
                  }
                }}
                // 提交参数的单独转换,有些是后台接受的参数不是实际前端获取的参数,此处单独转换
                transform={(value) => {
                  // 取id的最后一条
                  const val = value && value.length ? value[value.length - 1] : 0;
                  // 此处注意返回的是一个对象
                  return { pid: val };
                }}
                // 注意 ant组件的原生配置 都要写在fieldProps下
                fieldProps={{
                  changeOnSelect: true, //选择某一级而非最后一级
                  fieldNames: {
                    label: 'name',
                    value: 'id',
                  },
                  options: tableData,
                }}
                // request={async () => {
                //   // fieldProps
                //   const res = await getDeptList();
                //   return res.data;
                // }}
                name="parentId"
                label="选择部门"
                placeholder={'请选择'}
              />
            );
          }
        }}
      </ProFormDependency>

      <ProFormTextArea
        label="备注"
        name="remark"
        rules={[
          {
            required: true,
            message: '请输入备注',
          },
        ]}
        placeholder="请输入备注"
      />
    </ModalForm>
  );
};

export default CreateForm;
